<template>
  <div>
    <div class="node-name">{{ previewData.nodeName }}</div>
    <div class="grouping mt5">（{{ motorcount }}动{{ trailercount }}拖）</div>
    <div class="node-name mt10">{{ previewData.proposalName }}</div>
    <el-collapse v-model="activeName" accordion class="mt10">
      <el-collapse-item
        v-for="(item, index) in listData"
        :key="index"
        :name="index"
      >
        <template slot="title">
          {{ item.name }}
        </template>
        <template>
          <table-panel
            ref="tablePanel"
            align="left"
            :table-data="item.tableData"
            :columns="columns"
            :pagination="false"
          >
          </table-panel>
        </template>
      </el-collapse-item>
    </el-collapse>
    <div class="mt10" style="padding-bottom: 20px">总价：{{ total }}</div>
  </div>
</template>
<script>
import TablePanel from "@/components/TablePanel/index.vue";
export default {
  components: { TablePanel },
  props: {
    previewData: {
      typeof: Object,
      default: null
    }
  },
  data() {
    return {
      activeName: '1',
      motorcount: 0,
      trailercount: 0,
      listData: [],
      motorBase: [],
      motorChoose: [],
      trailerBase: [],
      trailerChoose: [],
      columns: [
        {
          field: "systemName",
          label: "系统名称",
          width: '130px',
          type: 'sys_system_name'
        },
        {
          field: "subSystem",
          label: "子系统名称",
          width: "120px",
          type: 'sys_sub_system_name'
        },
        {
          field: "subSystemConfigurationCode",
          label: "子系统架构码",
          width: "120px",
          type: 'sub_system_configuration_code'
        },
        {
          field: "manufacturer",
          label: "制造厂家",
          width: "190px",
          type: 'sys_manufacturer'
        },
        {
          field: "specificationModel",
          label: "规格型码",
          width: "170px",
          type: 'sys_specification_model'
        },
        {
          field: "nums",
          label: "数量",
          width: "170px",
        },
        {
          label: "单价",
          children: [
            {
              field: "domesticGoodsPrice",
              label: "国产货物",
              width: '130px'
            },
            {
              field: "noFreeImportGoodsPrice",
              label: "不可免税进口货物",
              width: "150px"
            },
            {
              field: "freeImportGoodsPrice",
              label: "可免税进口货物(CIF价)",
              width: "190px"
            },
          ],
        },
        {
          label: "总价",
          children: [
            {
              field: "sumDomesticGoodsPrice",
              label: "国产货物",
              width: "130px",
            },
            {
              field: "sumNoFreeImportGoodsPrice",
              label: "不可免税进口货物",
              width: "150px",
            },
            {
              field: "sumFreeImportGoodsPrice",
              label: "可免税进口货物(CIF价)",
              width: "190px",
            },
          ],
        },
        {
          field: 'total',
          label: '合计',
          width: '180px'
        }
      ],
      total: 0
    }
  },
  methods: {
    getCArList(type) {
      if (type === 'motorCarNum') {
        for (let i = 0; i < this.motorcount; i++) {
          this.listData.push({
            name: '动车组-基础配置',
            type: 1,
            tableData: this.motorBase
          });
          this.listData.push({
            name: "动车组-可选配置",
            type: 2, // 可选配置
            tableData: this.motorChoose,
          });
        }
      } else if (type === 'trailerNum') {
        for (let i = 0; i < this.trailercount; i++) {
          this.listData.push({
            name: "拖车组-基础配置",
            type: 1, // 基础配置
            tableData: this.trailerBase,
          });
          this.listData.push({
            name: "拖车组-可选配置",
            type: 2, // 可选配置
            tableData: this.trailerChoose,
          });
        }
      }
    },
  },
  mounted() {
  },
}
</script>
<style scoped lang="scss">
.node-name {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #333;
}

.grouping {
  text-align: center;
}
</style>